
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>What The Heck Is Responsive Web Design?</title>
    
    <meta name="description" content="What The Heck Is Responsive Web Design? - an impress.js presentation">
    <meta name="author" content="John Polacek" />

    <link href='stylesheets/f.css' rel='stylesheet' type='text/css'>
    <link href="stylesheets/normalize.css" rel="stylesheet" />
    <link href="stylesheets/style.css" rel="stylesheet" />
</head>
<body>

	<div class="background"></div>
	
	<div id="hint">an <a href="http://bartaz.github.com/impress.js/">impress.js</a> presentation by <a href="http://twitter.com/johnpolacek">John Polacek</a>
		- use the spacebar or arrow keys to navigate</div>
	
	<div id="impress" class="impress-not-supported">
		
		<div id="title" class="step" data-x="540" data-y="600" data-scale="4.5">
			<div class="big bold">
				<div id="title-text1">What The Heck Is</div>
				<div id="title-text2">Responsive</div>
				<div id="title-text3">Web Design?</div>
			</div>
		</div>
	
		<div id="respond" class="step" data-x="2650" data-y="-290" data-scale="1">
			<div class="big bold">
				<div id="respond-text1">Responsive websites</div>
				<div id="respond-text2">respond</div>
				<div id="respond-text3">to their environment</div>
			</div>
		</div>
	
		<div id="adaptive-responsive" class="step" data-x="2650" data-y="220" data-scale="1">
			<div class="big bold">
				<div id="ar-adaptive">Adaptive</div>
				<div id="ar-adaptive-fixed">(Multiple Fixed Width Layouts)</div>
				<span>or</span>
				<div id="ar-responsive">Responsive</div>
				<div id="ar-responsive-fluid">(Multiple Fluid Grid Layouts)</div>
			</div>
		</div>
		
		<div id="combo" class="step" data-x="2650" data-y="590" data-scale="1">
			<div class="big bold">
				<span id="combo-or">...or</span>
				<div id="combo-text">Combo</div>
			</div>
			<div id="combo-fluid-fixed">
				<div id="combo-fluid" class="big">
					<div class="bold">Fluid Width</div>
					<div class="light">Small Screens</div>
				</div>
				<div id="combo-plus">+</div>
				<div id="combo-fixed" class="big">
					<div class="bold">Fixed Width</div>
					<div class="light">Medium &amp; Large</div>
				</div>
			</div>
		</div>
		
		<div id="why" class="step" data-x="-1700" data-y="900" data-scale="1">
			<div class="big bold title">Why?</div>
		</div>
		
		<div id="why-quote" class="step" data-x="-1700" data-y="1250" data-scale="1">
			<blockquote>&ldquo;Day by day, the number of devices, platforms, 
			and browsers that need to work with your site grows. 
			Responsive web design represents a fundamental shift 
			in how we&rsquo;ll build websites for the decade to come.&rdquo;
			<span class="author">- Jeffrey Veen</span></blockquote>
		</div>
		
		<div id="screens" class="step" data-x="-1700" data-y="1650" data-scale="1">
			<div class="big light" id="why-sml">Small + Medium + Large</div>
			<div class="big bold" id="why-one-site">One Site</div>
			<div class="big bold" id="why-every">For Every Screen</div>
		</div>
		
		<div id="who" class="step" data-x="-660" data-y="900" data-scale="1">
			<div class="big bold title">Who?</div>
		</div>
		
		<div id="who-real" class="step" data-x="-660" data-y="1120" data-scale="1">
			<div class="big light" id="who-real-not">Not just demos, design shops and vanity pages</div>
			<div class="big bold" id="who-real-real">Real Client Work</div>
		</div>
		
		<div id="who-boston" class="step" data-x="-885" data-y="1320" data-scale=".48">
			<a href="http://www.bostonglobe.com" class="img-link">
				<div class="img-wrap img-inline" id="img-bg-s">
				</div>
				<div class="img-wrap img-inline" id="img-bg-m">
				</div>
				<div class="img-wrap img-inline" id="img-bg-l">
				</div>
			</a>
			<div class="big bold" id="who-bg">The Boston Globe</div>
			<div class="big light" id="who-bg-desc">Largest responsive web design project to date</div>
			<a href="http://www.bostonglobe.com" class="small">bostonglobe.com</a>
		</div>
		
		<div id="who-obama" class="step" data-x="-415" data-y="1320" data-scale=".48">
			<a href="http://barackobama.com" class="img-link">
				<div class="img-wrap img-inline" id="img-obama-s">
				</div>
				<div class="img-wrap img-inline" id="img-obama-m">
				</div>
				<div class="img-wrap img-inline" id="img-obama-l">
				</div>
			</a>
			<div class="big bold" id="who-obama">Barack Obama</div>
			<div class="big light" id="who-obama-desc">The Obama campaign continues to be at the leading edge of web technology</div>
			<a href="http://barackobama.com" class="small">barackobama.com</a>
		</div>
		
		<div id="who-greygoose" class="step" data-x="-885" data-y="1550" data-scale=".48">
			<a href="http://www.greygoose.com" class="img-link">
				<div class="img-wrap img-inline" id="img-greygoose-s">
				</div>
				<div class="img-wrap img-inline" id="img-greygoose-l">
				</div>
			</a>
			<div class="big bold" id="who-greygoose">Grey Goose Vodka</div>
			<div class="big light" id="who-greygoose-desc">Responsive site for Grey Goose with parallax scrolling animation</div>
			<a href="http://www.greygoose.com" class="small">www.greygoose.com</a>
		</div>
		
		<div id="who-cac" class="step" data-x="-415" data-y="1550" data-scale=".48">
			<a href="http://clearairchallenge.com" class="img-link">
				<div class="img-wrap img-inline" id="img-clean-s">
				</div>
				<div class="img-wrap img-inline" id="img-clean-m">
				</div>
				<div class="img-wrap img-inline" id="img-clean-l">
				</div>
			</a>
			<div class="big bold" id="who-cac">Clear Air Challenge</div>
			<div class="big light" id="who-cac-desc">Promo site for the Clear Air Commute Challenge</div>
			<a href="http://clearairchallenge.com" class="small">clearairchallenge.com</a>
		</div>
		
		<div id="who-more" class="step" data-x="-640" data-y="1750" data-scale=".5">
			<div class="big bold">...and plenty more</div>
			<a href="http://mediaqueri.es/">http://mediaqueri.es</a>
		</div>
		
		<div id="when" class="step" data-x="420" data-y="900" data-scale="1">
			<div class="big bold title">When?</div>
		</div>
		
		<div id="when-things" class="step" data-x="420" data-y="1100" data-scale="1">
			<div class="big bold">Things to Consider</div>
		</div>
		
		<div id="when-thing1" class="step" data-x="420" data-y="1200" data-scale="1">
			<div class="big extralight">Time &amp; Money</div>
		</div>
		
		<div id="when-thing2" class="step" data-x="420" data-y="1300" data-scale="1">
			<div class="big extralight">Browser Support</div>
		</div>
		
		<div id="when-thing3" class="step" data-x="420" data-y="1400" data-scale="1">
			<div class="big extralight">Performance</div>
		</div>
		
		<div id="when-thing4" class="step" data-x="420" data-y="1530" data-scale="1">
			<div class="big extralight">Content</div>
		</div>
		
		<div id="how" class="step" data-x="1520" data-y="900" data-scale="1">
			<div class="big bold title">How?</div>
		</div>
		
		<div id="how-quote" class="step" data-x="1520" data-y="1165" data-scale="1">
			<blockquote>&ldquo;Stop Thinking in Pages.<br /> Start Thinking in Systems.&rdquo;
			<span class="author">- Jeremy Keith</span></blockquote>
		</div>
		
		<div id="how-frameworks" class="step" data-x="1520" data-y="1480" data-scale="1">
			<div>
				<div class="big bold" id="how-frameworks-text">Frameworks</div>
				<div class="big extralight" id="how-savetime">(Save Time)</div>
				<span>or</span>
				<div class="big bold" id="how-rollyourown">Roll Your Own</div>
				<div class="big extralight" id="how-control">(More Control)</div>
			</div>
		</div>
		
		<div id="how-best" class="step" data-x="1520" data-y="1780" data-scale="1">
			<div class="big bold">Best Practices</div>
		</div>
		
		<div id="how-best1" class="step" data-x="1520" data-y="1880" data-scale="1">
			<div class="big light">Content Check</div>
		</div>
		
		<div id="how-best2" class="step" data-x="1520" data-y="2045" data-scale="1">
			<div class="big light" id="how-best2-small">Start Small</div>
			<div class="big light">Mobile First</div>
		</div>
		
		<div id="how-best3" class="step" data-x="1520" data-y="2255" data-scale="1">
			<div class="big light" id="how-best3-exit">Exit Photoshop</div>
			<div class="big light">Enter Browser</div>
		</div>
		
		<div id="how-best4" class="step" data-x="1520" data-y="2395" data-scale="1">
			<div class="big light">Think Modular</div>
		</div>
		
		<div id="how-best5" class="step" data-x="1520" data-y="2475" data-scale="1">
			<div class="big light">Always Be Optimizing</div>
		</div>
		
		<div id="how-best6" class="step" data-x="1520" data-y="2540" data-scale="1">
			<div class="big extralight">*Best practices still emerging</div>
		</div>
		
		<div id="where" class="step" data-x="2580" data-y="900" data-scale="1">
			<div class="big bold title">Where?</div>
		</div>
		
		<div class="step where-step" data-x="2580" data-y="1350" data-scale="1">
			<div class="big" id="where-leaders">Leaders</div>
			<div class="big extralight" id="where-leader-em">
				<a href="http://unstoppablerobotninja.com">Ethan Marcotte</a>
			</div>
			<div class="big extralight" id="where-leader-lw">
				<a href="http://www.lukew.com/ff/">Luke Wroblewski</a>
			</div>
			<div class="big extralight" id="where-leader-sj">
				<a href="http://scottjehl.com">Scott <span class="adj-j">J</span>ehl</a>
			</div>
			<div class="big extralight" id="where-leader-jk">
				<a href="http://adactio.com/articles/"><span class="adj-j">J</span>eremy Keith</a>
			</div>
			<div class="big extralight" id="where-leader-cc">
				<a href="http://css-tricks.com">Chris Coyier</a>
			</div>
		</div>
		
		<div class="step where-step" data-x="2580" data-y="1980" data-scale="1">
			<div id="where-learn" class="big">Learn It</div>
			<div class="big extralight" id="where-learn-t">
				<a href="http://teamtreehouse.com/library/design-foundations/rwd-foundations">Treehouse</a>
			</div>
			<div class="big extralight" id="where-learn-ala">
				<a href="http://www.alistapart.com/articles/responsive-web-design/">A List Apart</a>
			</div>
			<div class="big extralight" id="where-learn-tp">
				<a href="http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/">webdesign tuts+</a>
			</div>
			<div class="big extralight" id="where-learn-rn">
				<a href="http://blog.responsivenews.co.uk">Responsive News</a>
			</div>
		</div>
		
		<div class="step where-step" id="where-cool" data-x="2580" data-y="2610" data-scale="1">
			<div class="big" id="where-cool-title">Cool Stuff</div>
			<div class="big extralight" id="where-cool-b">
				<a href="http://bootstrap.io">Bootstrap</a>
			</div>
			<div class="big extralight" id="where-cool-g">
				<a href="http://goldilocksapproach.com">Goldilocks</a>
			</div>
			<div class="big extralight" id="where-cool-f">
				<a href="http://foundation.zurb.com">Foundation</a>
			</div>
			<div class="big extralight" id="where-cool-s">
				<a href="http://www.getskeleton.com/">Skeleton</a>
			</div>
		</div>
		
		<div class="step where-step" id="where-cool2" data-x="2580" data-y="3190" data-scale="1">
			<div class="big" id="where-cool-title2">More Cool Stuff</div>
			<div class="big extralight" id="where-cool-r">
				<a href="http://responsejs.com">response.<span class="adj-j">j</span>s</a>
			</div>
			<div class="big extralight" id="where-cool-fit">
				<a href="http://fittextjs.com">FitText</a> <a href="http://fitvidsjs.com/">FitVids</a>
			</div>
			<div class="big extralight" id="where-cool-fi">
				<a href="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid Images</a>
			</div>
			<div class="big extralight" id="where-cool-bp">
				<a href="http://xoxco.com/projects/code/breakpoints/">Breakpoints.<span class="adj-j">j</span>s</a>
			</div>
			<div class="big extralight" id="where-cool-sz">
				<a href="http://rezitech.github.com/syze/">syze</a><a href="http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/">... and plenty more</a>
			</div>
		</div>
		
		<div class="step" id="credits" data-x="4000" data-y="0" data-rotate="-90" data-rotate-y="90" data-scale=".1">
			<div class="big bold">Credits</div>
			<p class="first">an <a href="http://bartaz.github.com/impress.js/">impress.js</a> presentation by <a href="http://twitter.com/johnpolacek">John Polacek</a></p>
			<p>Responsive Web Design Graphic by <a href="http://bakkenbaeck.com">Bakken &amp; Baeck</a></p>
			<p>Responsive Web Design Book published by <a href="www.abookapart.com">A Book Apart</a></p>
			<p>Jeremy Keith quote from <a href="http://5by5.tv/webahead">The Web Ahead Podcast</a></p>
			<p>Jeff Veen quote from a review of <a href="http://www.abookapart.com/products/responsive-web-design">&rsquo;Responsive Web Design&lsquo;</a></p>
			<p><a href="http://www.google.com/webfonts/specimen/Open+Sans">Open Sans Font</a> by <a href="https://profiles.google.com/107777320916704234605/about">Steve Matteson</a></p>
			<p><a href="http://bartaz.github.com/impress.js/">impress.js</a> created by <a href="http://bartaz.github.com/">Bartek Szopka</a></p>
		</div>
		
	</div>
	
	<script src="javascripts/a.js"></script>
	<script src="javascripts/impress.js"></script>

</body>
</html>
